<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import '../../../../node_modules/echarts/map/js/china.js'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '650px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({tooltip: {
						formatter: function(params) {
              console.log(params)
              const data = params.data;
							return data.name + "<br />设备数：" + data.value;
						}
					},
					visualMap: {
						type: "piecewise",
						splitNumber: 6,
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 5,
						textGap: 5,
						textStyle: {
							fontSize: 10,
							color: "#b0c2f9"
						},
						min: 0,
						max: 6000,
						calculable: true,
						seriesIndex: [0]
					},
					geo: {
						map: "china",
						roam: false, //开启鼠标缩放和漫游
						zoom: 1, //地图缩放级别
						selectedMode: "single",
						top: 10,
						bottom: 10,
						layoutCenter: ["50%", "50%"],
						layoutSize: "100%", //保持地图宽高比
						label: {
							show: true,
							fontSize: 10,
							color: "#ceac09"
						}
					},
					series: [{
            name: "地域分布",
						type: "map",
            geoIndex: 0,
            data:[
            {
              "name": "安徽",
              "value": 1203
            },
            {
              "name": "内蒙古",
              "value": 526
            },
            {
              "name": "宁夏",
              "value": 413
            },
            {
              "name": "青海",
              "value": 212
            },
            {
              "name": "福建",
              "value": 2134
            },
            {
              "name": "山东",
              "value": 2400
            },
            {
              "name": "山西",
              "value": 436
            },
            {
              "name": "陕西",
              "value": 551
            },
            {
              "name": "上海",
              "value": 5263
            },
            {
              "name": "四川",
              "value": 2124
            },
            {
              "name": "天津",
              "value": 2349
            },
            {
              "name": "北京",
              "value": 5315
            },
            {
              "name": "西藏",
              "value": 717
            },
            {
              "name": "新疆",
              "value": 254
            },
            {
              "name": "云南",
              "value": 735
            },
            {
              "name": "浙江",
              "value": 2432
            },
            {
              "name": "甘肃",
              "value": 335
            },
            {
              "name": "重庆",
              "value": 450
            },
            {
              "name": "广东",
              "value": 3589
            },
            {
              "name": "广西",
              "value": 537
            },
            {
              "name": "贵州",
              "value": 629
            },
            {
              "name": "海南",
              "value": 629
            },
            {
              "name": "黑龙江",
              "value": 538
            },
            {
              "name": "河北",
              "value": 660
            },
            {
              "name": "河南",
              "value": 580
            },
            {
              "name": "江苏",
              "value": 3402
            },
            {
              "name": "湖北",
              "value": 4102
            },
            {
              "name": "湖南",
              "value": 2106
            },
            {
              "name": "吉林",
              "value": 444
            },
            {
              "name": "江西",
              "value": 741
            },
            {
              "name": "辽宁",
              "value": 976
            }
          ]
          }]
          })
    }
  }
}
</script>
